const resume = `

## 基本信息

+ 姓名： 黄增荣            求职意向：前端工程师
+ 电话： 15521242307       邮箱：315779312@qq.com       
+ 博客：https://blog.csdn.net/Huang58_com     码云地址：https://gitee.com/air-hzr


## 专业技能

+ 熟练使用<span> div+css </span>页面布局、掌握<span> JavaScript</span>；符合 w3c 标准和 HTML 语义化标签， 兼容目前常用浏览器
+ 掌握<span> HTML5/CSS3 </span>传统布局，Flex 布局，Grid 布局
+ 熟练使用 CSS 预处理器 less 或 sass 进行项目样式开发 
+ 了解使用<span> ES6 </span>的新特性，比如 Promise，字符串模板等
+ 熟练使用<span>Jquery </span>完成的元素操作、样式修改、动画效果
+ 熟悉<span> Vue全家桶 </span>，<span>Uni-App</span>进行项目开发
+ 能使用<span> Vue Ui</span>可视化或<span> Vue-cli</span>搭建项目
+ 掌握使用<span>Vue-Router </span>路由配置，<span> Vuex</span>来对项目的状态管理
+ 熟练使用<span> Axios</span>进行前后端的页面交互
+ 了解使用<span>Element-UI </span>与 <span>Jquery-UI </span>库 
+ 能使用<span> Node.js </span>搭建基础的后端开发
+ 了解一些<span> Webpack </span>对项目进行的配置和打包

## 个人项目经验

### 在线聊天室
项目描述：
1.	项目采用<span>Node(Express框架)</span>搭建后台服务器
2.	应用<span>Vue</span>作为主流框架 
3.	应用<span>Vue-Router</span>搭建项目路由配置项
4.	使用<span>Element-Ui </span>作为ui组件库对项目

<a href="https://gitee.com/air-hzr/chatroom" target="_blank">源码预览 </a>

### 后台管理系统
项目描述：
1.	应用<span>Vue</span>作为主框架
2.	应用<span>Vue-Router</span>作为路由配置项，<span>Vuex</span>作为中间状态管理
3.	使用<span>Element-ui</span>组件作为UI组件库，应用了组件库的部分组件Api辅助开发
4.  使用<span>Axios </span>实现请求拦截，实现前后端分离开发

<a href="https://gitee.com/air-hzr/vue_shop" target="_blank">源码预览 </a>

### markdown简历生成
项目描述：看简历是如何一步步生成的
项目技术栈：
1.  使用<span>Jquery</span>操作DOM
2.  使用<span>Promise</span>进行异步操作
3.  使用marked库把markdown语法转换成HTML标签
4.  使用prismjs库让CSS的代码高亮
<a href=" http://air-hzr.gitee.io/resume-generation" target="_blank">点击预览</a>  <a href="https://gitee.com/air-hzr/resume-generation" target="_blank">源码预览 </a>

### wx淘宝小程序
项目描述：
1.  使用了应用于<span> Vue </span>开发的<span> Uni-App </span>作为主框架。
2.  应用<span>Vuex</span>作为中间状态管理，分别管理用户信息，收货地址，购物车等数据
3.  使用<span> Promise </span>封装各项Api功能 
4.  封装提示组件，包含成功提示，失败提示，加载中提示

<a href="https://gitee.com/air-hzr/WX_TaoBao" target="_blank">源码预览 </a>

## 自我评价
+ 具备前端工程师具备的基础工作经验，能够独立进行前端开发;对编程有着浓厚的兴趣，有较好的心理素质和抗压能力；
+ 对待工作认真，能够配合团队完成项目开发;对新技术有着强烈的追求。  

## 教育背景

+ 2018~至今
     广州现代信息工程职业技术学院
     计算机网络技术 
     期间担任班长，获得web程序设计二级 
`;

const style = `
/* 
    页面的基本样式
*/

* {
    transition: all .3s;
    box-sizing: border-box;
}

html,body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}



.container {
    width: 98%;
    height: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;

}

.styleContainer {
    width: 36%;
    height: 100%;
    color: #fff;
    font-size: 14px;
}


.styleContainer .stylePre {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    overflow-y: scroll;
    margin-top: 0;
    word-break:break-all;
    word-wrap:break-word;
    white-space:pre-wrap;

}

`;

const style1 = `
/* 
    开始简历样式优化
*/
.content {
    width: 63%;
    height: 100%;
    background: #fff;
    overflow-y: scroll;
    padding: 10px 20px;
}


#resumeContent {
    white-space:pre-wrap
}

#resumeContent * {
    margin: 0;
  
}

#resumeContent span{
    color: red;
    font-weight: 1000;
}

#resumeContent h2 {
    padding: 5px 0;
    border-bottom: 1px solid #000;
}

#resumeContent ul {
    font-size: 0;
    margin: 0;
}

#resumeContent ul li {
    line-height: 30px;
    font-size: 14px;
    margin: 0;
}
#resumeContent ol {
    margin: 0 0 0 100px;
    padding: 0;
}

#resumeContent ol li {
   margin: 0
}

/*
    CSS高亮代码
*/
`;

class resumeComponent {
    constructor() {
        // 播放的速度
        this.delay = 10;
        this.nowWordNum = 0;
        this.prevCode = "";
        this.changeSpeed();
    }
    /*测试*/
    changeSpeed() {
        $("#addSpeed").on("click", () => {
            //console.log("???")
            this.delay -= 920;
        })
    }
    // 生成简历
    async generate() {
        await this.startStyle(style);
        await this.startResume();
        await this.changeMarkdown();
        await this.startStyle(style1);
        await this.lightHeightCode();
    }
    //初始化样式
    startStyle(prevVariable = "") {
        this.prevCode += prevVariable;
        let nowCode = this.prevCode;

        let nowCodeLength = this.nowWordNum;

        // 当前的传入变量的长度
        let prevIndex = prevVariable.length;
        // 初始值
        let index = 0;
        return new Promise((resolve) => {
            let timer = setInterval(() => {

                if (index < prevIndex) {
                    index++;
                    $("#style").html(nowCode.substr(0, nowCodeLength + index));
                    $("#styleCode").html(nowCode.substr(0, nowCodeLength + index));
                    $("#stylePre").scrollTop(1000000);
                } else {
                    this.nowWordNum += prevVariable.length;
                    clearInterval(timer);
                    resolve("页面初始样式完成");
                }
            }, this.delay);
        });
    }
    //初始化简历内容
    startResume() {
        return new Promise((resolve) => {
            let index = 0;
            let timer = setInterval(() => {
                if (index < resume.length) {
                    index++;
                    $("#resumeContent").html(resume.substr(0, index));
                } else {
                    clearInterval(timer);
                    resolve("简历内容完成");
                }
            }, this.delay);
        });
    }
    //高亮css代码
    lightHeightCode() {
        $("#styleCode").html(
            Prism.highlight(
                this.prevCode,
                Prism.languages.css
            )
        );
    }


    changeMarkdown() {
        return new Promise((resolve, reject) => {
            let resumeHtml = $("#resumeContent").html();
            $("#resumeContent").html(marked(resumeHtml));
            resolve("将markdown转换成HTML");
        });
    }


}

// 调用
new resumeComponent().generate();

//原理
// 创建一个promise对象，当ajax函数请求完成之后，再success函数中调用promise

// const startWrite = () => {
//     // 接收到数据开始执行此函数
//     // 使用递归调用来判断是否全部输出完

// }
